@import "./../../common/size.scss";

.common-header{
  background-color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  position: fixed;
  left: 0;
  top:0;
  z-index: 10;

  padding: $_8 $_24;

  .logo{
    width: $_150;
    height: $_80;

    animation:showScale 5s infinite alternate;

    img{
      width: 100%;
      height: 100%;
    }
  }

  .search-bar {
    flex:1;
    height: $_60;
    background-color: #f6f6f6;
    margin-left: $_28;
    border-radius: $_30;
    display: flex;
    justify-content: center;
    align-items: center;

    .search-icon{
      width: $_40;
      height: $_40;
      background-image: url("./../../images/search.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }

    .search-placeholder{
      color: #999;
      font-size: $_22;
      margin-left: $_12;
    }

  }


  @keyframes showScale {
    0%{
      transform: scale(1);
    }
    50%{
      transform: scale(1);
    }
    55%{
      transform: scale(1.1)
    }
    60%{
      transform: scale(1)
    }
    100%{

    }
  }

}